<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <hr />
    <div @click="changeObjName">obj.name: {{ obj.name }}</div>
    <div>obj.age: {{ obj.age }}</div>
    <hr />
    <div>name: {{ name }}</div>
    <div>age: {{ age }}</div>
  </div>
</template>

<script>
// toRefs
// toRefs 是一个函数,将对象的属性变成响应式数据
// 参数: 必须是一个对象
// 返回值: 返回一个新的对象,对象的属性变成了响应式数据
import { reactive, ref, toRefs } from "vue";
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  setup() {
    const obj = reactive({
      name: "张三",
      age: 18,
    });
    console.log(obj);

    const obj1 = toRefs(obj);
    console.log(obj1);
    console.log(obj === obj1);

    const changeObjName = () => {
      obj.name += "风";
    };

    return {
      obj,
      // ...obj,
      ...obj1,
      changeObjName,
    };
  },
};
</script>

<style scoped>
</style>
